<template>
	<!-- 推荐有奖 -->
	<view class="Recommend">
		<view class="place" :style="{background:newColor.color}"></view>
		<view class="user" :style="{background:newColor.color}">
			<!-- 头像 -->
			<view class="left">
				<image :src="userInfo.head_img" @tap="toSetting" v-if="userInfo.head_img"></image>
				<image src="/static/img/face.jpg" v-else></image>
			</view>
			<!-- 昵称,个性签名 -->
			<view class="right">
				<view class="username" @tap="toLogin">{{userInfo.username || userInfo.mobile}}</view>
				<!-- <view class="signature">{{user.signature}}</view> -->
			</view>
			<view class="moneys">
				<view class="left">
					<p class="p1">¥{{userInfo.money || 0}}</p>
					<p class="p2">余额</p>
				</view>
				<view class="right" @tap="onCash"><p>提现</p></view>
			</view>
			<view class="number">
				<view class="left">
					<p class="p1">{{userInfo.recommend_num || 0}}</p>
					<p class="p2">推荐人数</p>
				</view>
				<view class="center"></view>
				<view class="right">
					<p class="p1">¥ {{userInfo.recommend_money || 0}}</p>
					<p class="p2">推荐奖励</p>
				</view>
			</view>
		</view>
		<!-- 推荐列表 -->
		<view class="recommend_list">
			<p class="top_title">推荐列表</p>
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="share" class="fx_btn" :style="{background:newColor.color}"><image src="../../static/image/ewm.png" mode="" class="ewm"></image></button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<image src="../../static/image/ewm.png" mode="" class="h5ewm" :style="{background:newColor.color}" @tap="jumpMyQr"></image>
			<!-- #endif -->
			<view class="list_box">
				<view class="list_s" v-for="(item,index) in newList" :key="index">
					<image :src="item.head_img" mode=""></image>
					<text class="name">{{item.username}}</text>
					<text class="time">{{item.create_time}}</text>
				</view>
				<nodata v-if="newList.length == 0"></nodata>
			</view>
		</view>
		<view class="fixed_btn" :style="{ background: newcolors.color }" @click="jumpPoster">
			<image src="../../../static/img/fenxiang.png" mode=""></image>
			<text>分享</text>
		</view>
		
		<ourLoading isFullScreen :active="active" text="loading..." />
	</view>
</template>

<script>
import {getUserInfo} from '../../../static/utils/ahth.js'
import nodata from '@/components/nodata/nodata.vue'
export default {
	data() {
		return {
			active: true,
			newList:[],
			pageIndex: 1,
			userInfo: {},
			uid:''
		};
	},
	onShow() {
		this.userInfo = getUserInfo()
		this.getList()
		setTimeout(()=>{
			this.active = false
		},600)
	},
	onPullDownRefresh() {
		console.log('下拉刷新');
		let that = this;
		that.pageIndex = 1;
		setTimeout(function() {
			that.getList();
			uni.stopPullDownRefresh();
		}, 500);
	},
	onReachBottom: function() {
		// pullScroll.success();
		console.log('上拉加载');
		let that = this;
		uni.showLoading({
			title: '加载中',
			duration: 500
		});
		setTimeout(() => {
			that.pageIndex++;
			that.request('user/getSubList', {
				page: that.pageIndex,
				psize: 10
			}).then(res => {
				console.log(res);
				if (res.data.code == 0) {
					let newdata = res.data;
					that.newList = that.newList.concat(newdata);
				}
				uni.hideLoading();
			});
		}, 1000);
	},
	onShareAppMessage: function(ret) {
		//**** 在这里配置弹出的分享框的内容
		return {
			title: '', // 设置弹出框的标题
			path: `/pages/tabBar/home/home?pid=${this.userInfo.user_id}`, //设置弹出框分享出去的链接地址
			imageUrl: '../../../static/img/shuiguo.jpg', //设置弹出框分享出去的图片
			success: function(res) {
				console.log(res);
			}
		};
	},
	created() {
		this.changeTabBar()
	},
	methods:{
		changeTabBar() {
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: this.newColor.color,
			    animation: {
			        duration: 400,
			        timingFunc: 'easeIn'
			    }
			})
		},
		jumpMyQr(){ //如果是H5端
			this.$Router.push({path:'/pages/user/myQR/myQR'})
		},
		onCash(){//提现
			this.$Router.push({ path: '/pagesA/pages/user/withdrawal' });
		},
		getList(){//获取推荐列表
			this.request('user/getSubList',{
				page: this.pageIndex,
				psize: 10
			}).then(res=>{
				console.log(res)
				this.newList = res.data
			})
		}
	}
};
</script>

<style scoped lang="scss">
.Recommend {
	overflow: hidden;
}
.place {
	background-color: #f23a3a;
	height: 50upx;
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
}
.user {
	width: 100%;
	padding: 0 4%;
	display: flex;
	align-items: center;
	// position: relative;
	background-color: #f23a3a;
	padding-bottom: 140upx;
	position: relative;
	.left {
		width: 16vw;
		height: 16vw;
		flex-shrink: 0;
		margin-right: 20upx;
		// border: solid 1upx #fff;
		border-radius: 100%;
		image {
			width: 16vw;
			height: 16vw;
			border-radius: 100%;
		}
	}
	.right {
		width: 35%;
		.username {
			font-size: 32upx;
			color: #fff;
		}
		.signature {
			color: #eee;
			font-size: 28upx;
		}
	}
	.moneys {
		display: flex;
		position: absolute;
		top: 30upx;
		right: 20upx;
		.left {
			text-align: center;
			border-radius: 0;
			margin-right: 20upx;
			min-width: 200upx;
			text-align: right;
			.p1 {
				font-size: 32upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
			.p2 {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}
		.right {
			width: 130upx;
			height: 56upx;
			line-height: 56upx;
			border: 2upx solid rgba(255, 255, 255, 1);
			border-radius: 28upx;
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
	.number {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60vw;
		.left {
			float: left;
			text-align: center;
			.p1 {
				font-size: 46upx;
				color: #ffffff;
			}
			.p2 {
				font-size: 24upx;
				color: #ffffff;
			}
		}
		.right {
			float: right;
			text-align: center;
			.p1 {
				font-size: 46upx;
				color: #ffffff;
			}
			.p2 {
				font-size: 24upx;
				color: #ffffff;
			}
		}
		.center {
			width: 1upx;
			height: 40upx;
			background: rgba(255, 255, 255, 1);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
.recommend_list {
	padding: 30upx;
	margin-top: 20upx;
	overflow: hidden;
	position: relative;
	.top_title {
		font-size: 32upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
	.fx_btn {
		overflow: hidden;
		position: absolute;
		right: 30upx;
		top: 20upx;
		width: 80upx;
		height: 80upx;
		border: none;
		border-radius: 50%;
		background-color: #f23a3a;
		padding: 0 !important;
	}
	.ewm {
		width: 42upx;
		height: 42upx;
		display: block;
		margin: 0 auto;
		margin-top: 18upx;
	}
	.h5ewm{
		width: 42upx;
		height: 42upx;
		padding: 20upx;
		border-radius: 50%;
		background-color: #f23a3a;
		position: absolute;
		right: 30upx;
		top: 20upx;
		box-sizing: content-box;
	}
	.list_box {
		overflow: hidden;
		margin-top: 50upx;
		.list_s {
			height: 100upx;
			line-height: 100upx;
			border-bottom: 1upx solid #f2f2f2;
			image {
				width: 66upx;
				height: 66upx;
				border-radius: 50%;
				float: left;
				margin-top: 20upx;
				margin-right: 20upx;
			}
			.name {
				font-size: 28upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
			.time {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				float: right;
			}
		}
	}
}

.fixed_btn {
			position: fixed;
			right: 0;
			top: 78%;
			width: 130upx;
			background-color: pink;
			height: 70upx;
			line-height: 70upx;
			border-top-left-radius: 40upx;
			border-bottom-left-radius: 40upx;
			z-index: 150;
			image {
				height: 50upx;
				width: 50upx;
				float: left;
				margin: 10upx;
			}
			text {
				color: #ffffff;
				font-size: 24upx;
			}
		}
</style>
